import React, { Component, createRef } from 'react'

import {
  Form,
  Icon,
  Input,
  Button,
  Card,
  DatePicker,
  message,
  Spin
} from 'antd'

import moment from 'moment'

import E from 'wangeditor'

import { getArticleById } from '../../requests'

import './Edit.less'

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 }
}

@Form.create()
export default class Edit extends Component {
  constructor() {
    super()
    this.state = {
      author: '',
      createAt: '',
      title: '',
      content: '',
      spinning: true
    }
    this.editorRef = createRef()
  }

  initEditor = () => {
    this.editor = new E(this.editorRef.current)
    this.editor.customConfig.onchange = html => {
      this.setState({
        content: html
      })
    }
    this.editor.create()
  }

  getData = () => {
    getArticleById(this.props.match.params.id).then(resp => {
      if (resp.data.code === 200) {
        const { author, createAt, title, content } = resp.data.data
        this.setState(
          {
            author,
            createAt,
            title,
            content,
            spinning: false
          },
          () => {
            this.editor.txt.html(this.state.content)
          }
        )
      }
    })
  }

  componentDidMount() {
    this.initEditor()
    this.getData()
  }

  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (err) {
        return message.error('请检查填写信息')
      }
      console.log(values)
      /* const data = {
        ...values,
        createAt: values.time.format()
      } */
      /* const data = Object.assign({}, values, {
        createAt: values.time.format()
      }) */
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Spin spinning={this.state.spinning}>
        <Form className="login-form">
          <Card
            title={`编辑文章 : ${this.props.location.state.title}`}
            bordered={false}
          >
            <Form.Item label="文章名称" {...formItemLayout}>
              {getFieldDecorator('title', {
                initialValue: this.state.title,
                rules: [
                  {
                    required: true,
                    message: '请输入文章名!1~10个字符',
                    min: 1,
                    max: 20
                  }
                ]
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入文章名"
                />
              )}
            </Form.Item>
            <Form.Item label="作者" {...formItemLayout}>
              {getFieldDecorator('author', {
                initialValue: this.state.author,
                rules: [
                  {
                    required: true,
                    message: '请输入作者!2~5个字符',
                    min: 2,
                    max: 5
                  }
                ]
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入作者"
                />
              )}
            </Form.Item>

            <Form.Item label="创建时间" {...formItemLayout}>
              {getFieldDecorator('time', {
                initialValue: moment(this.state.createAt),
                rules: [{ required: true, message: '请选择创建时间!' }]
              })(
                <DatePicker
                  renderExtraFooter={() => 'extra footer'}
                  showTime
                  style={{ width: '100%' }}
                />
              )}
            </Form.Item>

            <Form.Item label="文章内容" {...formItemLayout}>
              {getFieldDecorator('articleConent', {
                initialValue: this.state.content
              })(<div ref={this.editorRef} />)}
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 4
              }}
            >
              <Button type="primary" onClick={this.handleSubmit}>
                保存
              </Button>
            </Form.Item>
          </Card>
        </Form>
      </Spin>
    )
  }
}
